<template>
	<view class="page-form-group-input uni-padding-wrap">
		<view class="form-group">
			<input class="input" :focus="focus" :value="options.value" @input="changeValue"/>
		</view>
		<view class="submit form-group">
			<button type="primary" class="btn-submit" @tap="save">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus: false,
				options: {}
			}
		},
		onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			if (this.options.page_title) {
				uni.setNavigationBarTitle({
					title: this.options.page_title
				})
			}
			this.focus = true
		},
		methods: {
			changeValue(e) {
				console.log(e)
				this.options.value = e.detail.value
			},
			save(e) {
				console.log(e)
				let value = this.options.value.trim()
				if (this.options.required && value === "") {
					uni.showToast({
						title: "不能为空",
						icon: "none"
					})
					return
				}
				this.$store.commit('setNewName', value)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
.page-form-group-input {
	.form-group {
		display: flex;
		margin: 20rpx 0;
		.input {
			width: 100%;
			display: block;
			padding: 10rpx 0;
			background-color: #eee;
		}
		.btn-submit {
			width: 100%;
		}
	}
}
</style>
